/* 全局样式，需要在 main.js 中引入 */
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* ------------登录后每个模块的卡片样式--------- */
.el-card {
  margin-top: 10px;
  padding: 0 20px;
}

/* ------------弹出对话框内的表单输入框右边距---------- */
.add_form {
  padding-right: 30px;
}


/* ------------级联选择框样式------------ */
.el-cascader-menu {
  height: 250px;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}


/* ------------分页器样式------------ */
.el-pagination {
  margin-top: 26px;
}





/*------------------------------------------------------*/
/* 登录组件 */
.login_cont {
  width: 100%;
  height: 100%;
  background-color: #04797c;

  .login_box {
    width: 450px;
    height: 300px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -225px;
    margin-top: -150px;

    .avatar_box {
      width: 150px;
      height: 150px;
      box-shadow: 0 0 10px #ddd;
      border-radius: 50%;
      border: 5px solid #eee;
      padding: 10px;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -65%);

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }

    .log_input {
      width: 100%;
      height: 160px;
      // 开启弹性布局：块元素
      display: flex;
      // 子元素总和超过父元素，决定子元素单行nowrap、多行wrap、多行反向wrap-reverse
      flex-wrap: wrap;
      // 子元素交叉轴对齐方式
      align-items: center;
      // 子元素主轴对齐方式
      justify-content: center;
      margin-top: 15%;

      .el-form-item {
        width: 85%;
        margin-bottom: 0;
      }
    }

    .log_but {
      display: flex;
      justify-content: center;

      button {
        width: 80px;
        height: 40px;
        font-size: 16px;
        margin: 6px 15px 0 15px;
        font-weight: bold;
      }
    }
  }
}


/*------------------------------------------------------*/
/* 登录后-左边侧边栏组件 */
.home_container {
  height: 100%;

  .el-header {
    background-color: #504f4f;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logoP {
      height: 100%;
      display: flex;
      align-items: center;

      img {
        width: 60px;
        height: 60px;
        border-radius: 20%;
      }

      span {
        color: #fff;
        font-weight: bold;
        font-size: 26px;
        margin-left: 20px;
      }
    }

    .el-button {
      font-weight: bold;
      font-size: 16px;
    }

  }

  .el-aside {
    background-color: #333744;

    .tog_but {
      background-color: #4a5064;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      font-weight: bold;
      cursor: pointer;
      // 文字间距
      letter-spacing: 0.2em;
    }

    .li_width {
      width: 200px;
    }
  }

  .el-main {
    background-color: #eaedf1;
  }

}



/*------------------------------------------------------*/
/* 登录后-用户列表组件 */
.users_cont {

  .el-table {
    margin-top: 20px;
    font-size: 12px;

    .table_but {
      display: flex;
      justify-content: space-evenly;
    }
  }




  .allot_p {
    display: inline-block;
  }
}


/*------------------------------------------------------*/
/* 登录后-权限列表组件 */
.rights_cont {
  .el-table {
    margin-top: 20px;
    font-size: 12px;
  }
}


/*------------------------------------------------------*/
/* 登录后-角色列表组件 */
.roles_cont {
  .el-card {
    .el-table {
      margin-top: 20px;
      font-size: 12px;

      .el-tag {
        margin: 20px 2px 20px 20px;
      }

    }

    .expand_tr {
      padding: 30px;
    }

    // 按钮展开区域的底边框
    .row_bottom {
      border-bottom: 1px solid rgb(216, 216, 216);
    }

    .row_top {
      border-top: 1px solid rgb(216, 216, 216);
    }

    .row_display {
      display: flex;
      align-items: center;
    }

    .row_display1 {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    .row_display2 {
      display: flex;
      align-items: center;
      margin-right: 15px;
    }


  }

}


/*------------------------------------------------------*/
/* 登录后-商品分类组件 */
.cate_cont {
  .el-card {
    .el-table {
      margin-top: 20px;
    }


    /*联级下拉选择框*/
    .el-cascader {
      width: 100%;
    }
  }
}


/*------------------------------------------------------*/
/* 登录后-分类参数组件 */
.params_cont {
  .el-row {
    margin-top: 20px;
  }

  .el-table {
    margin-top: 20px;

    .el-tag {
      margin: 12px 18px;

    }

    .input-new-tag {
      width: 120px;
      margin: 12px 18px;
    }

    .button-new-tag {
      margin: 12px 18px;
    }
  }
}


/*------------------------------------------------------*/
/* 登录后-商品列表组件 */
.list_goods_cont {
  .el-table {
    margin-top: 26px;
    font-size: 12px;
  }

}


/*------------------------------------------------------*/
/* 登录后-商品列表组件--添加商品组件 */
.addListGoods_cont {

  // 图片上传的预览图片对话框
  .el-dialog {
    background-color: #f8f6f6;

    .el-dialog__body {
      // 块级元素内部的行内元素水平居中：text-align: center;
      text-align: center;

      img {
        width: 100%;
      }
    }
  }

  // 富文本编辑器
  .ql-editor {
    min-height: 200px;
  }

  // 确定添加商品按钮区域
  .tabAddButton {
    height: 200px;

    .el-button {
      left: 50%;
      position: relative;
      margin-left: -60px;
      top: 60px;

    }

    i.el-icon-circle-plus-outline {
      margin-right: 6px;
    }
  }

  // 进度-步骤条区域
  .el-steps {
    margin: 26px 0 35px;

    .el-step__title {
      font-size: 12px;
    }
  }

  .el-form-item {
    margin-left: 20px;

    input {
      border: 2px solid #b9b9b9;
    }

    .add_cascader {
      width: 100%;
    }
  }

  // 添加商品动态参数区域
  .checkbox_form_item {
    border-bottom: 1px solid #bcbcbc;
    font-weight: bold;

    .el-checkbox {
      margin: 10px 15px 10px 0px !important;
    }
  }
}



/*------------------------------------------------------*/
/* 登录后-订单管理-订单列表组件 */
.order_cont {
  .el-table {
    margin-top: 25px;
    font-size: 12px;
  }

  .el-dialog {
    .el-form {
      .el-cascader {
        width: 100%;
      }
    }

    .el-timeline {
      font-size: 12px;
    }
  }

}